<template>
  <div>
    <el-steps
      :space="800"
      :active="this.homeInfo.orderBase.status + 1"
      finish-status="success"
      align-center
    >
      <el-step title="待付款"></el-step>
      <el-step title="待发货"></el-step>
      <el-step title="已发货"></el-step>

      <el-step
        title="退货"
        v-if="this.homeInfo.orderBase.status == 4"
      ></el-step>
      <el-step v-else title="已完成"></el-step>
    </el-steps>
    <hr style="width: 90%; margin-top: 50px" />
    <div>
      <span class="addess">
        订单信息：
        <span v-if="this.homeInfo.orderBase.status == 0">待付款</span>
        <span v-if="this.homeInfo.orderBase.status == 1">待发货</span>
        <span v-if="this.homeInfo.orderBase.status == 2">已发货</span>
        <span v-if="this.homeInfo.orderBase.status == 3">已完成</span>
        <span v-if="this.homeInfo.orderBase.status == 4">退货</span>
        <span v-if="this.homeInfo.orderBase.status == 5">无效订单</span>
      </span>
      <div class="message">
        <span>订单金额：{{ this.homeInfo.orderBase.payAmount }}</span>
        <span>订单编号：{{ this.homeInfo.orderBase.orderSn }}</span>
        <span>用户账号：{{ this.homeInfo.orderBase.memberUsername }}</span>
        <span>备注：{{ this.homeInfo.orderBase.totalAmount }}</span>
      </div>
      <div class="messages">
        <span>下单时间：{{ this.homeInfo.orderBase.createTime }}</span>
        <span>付款时间：{{ this.homeInfo.orderBase.paymentTime }}</span>
        <span>发货时间：{{ this.homeInfo.orderBase.deliveryTime }}</span>
        <span>收货时间：{{ this.homeInfo.orderBase.modifyTime }}</span>
      </div>
    </div>
    <hr style="width: 90%; margin-top: 50px" />
    <div>
      <span class="addess"> 收货人信息： </span>
      <div class="message">
        <span>收货人：{{ this.homeInfo.orderBase.receiverName }}</span>
        <span>用户姓名：{{ this.homeInfo.orderBase.memberUsername }}</span>
        <span>手机号码：{{ this.homeInfo.orderBase.receiverPhone }}</span>
        <span>邮政编码：{{ this.homeInfo.orderBase.totalAmount }}</span>
      </div>
      <div class="messages">
        <span
          >地市：{{ this.homeInfo.orderBase.receiverProvince }},{{
            this.homeInfo.orderBase.receiverCity
          }}</span
        >
        <span
          >详情地址：{{ this.homeInfo.orderBase.receiverDetailAddress }}</span
        >
      </div>
    </div>
    <hr style="width: 90%; margin-top: 50px" />
    <div>
      <span class="addess"> 商品信息： </span>

      <div class="creadess">
        <div
          style="width: 100%; height: 50px; border: 1px solid gray"
          class="creade"
        >
          <span>商品名称</span>
          <span>商品图片</span>
          <span>是否退货</span>
          <span>品牌</span>
          <span>价格</span>
          <span>商品数量</span>
          <span>小计</span>
        </div>
        <div
          class="creades"
          style="width: 100%; height: 120px; border: 1px solid gray"
        >
          <span>{{ this.homeInfo.orderItems[0].productName }}</span>
          <span>
            <img
              :src="this.homeInfo.orderItems[0].productPic"
              alt=""
              style="width: 100px"
            />
          </span>
          <span>
            <div v-if="this.homeInfo.orderItems[0].isReturn == 1">是</div>
            <div v-if="this.homeInfo.orderItems[0].isReturn == 0">否</div>
          </span>
          <span>{{ this.homeInfo.orderItems[0].productName }}</span>
          <span>{{ this.homeInfo.orderItems[0].productPrice }}</span>
          <span>{{ this.homeInfo.orderItems[0].productQuantity }}</span>
          <span>{{ this.homeInfo.orderItems[0].realAmount }}</span>
        </div>
      </div>
    </div>
    <div class="cost">
      <div>费用信息:</div>
      <div class="message">
        <span>运费金额:0</span>
        <span>订单总金额:{{ this.homeInfo.orderItems[0].realAmount }}</span>
        <span>实际金额:</span>
        <span>促销优化金额:0</span>
      </div>
      <div v-if="this.homeInfo.orderBase.status == 1">
        物流公司：<el-select
          v-model="sendDone.deliveryCompany"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <div>
          物流单号：<el-input
            v-model="sendDone.deliverySn"
            placeholder="请输入内容"
          ></el-input>
        </div>
      </div>
    </div>
    <div class="shipments" v-if="this.homeInfo.orderBase.status == 1">
      <el-button type="primary" @click="shipments">确认发货</el-button>
    </div>
    <div class="logistics" v-if="this.homeInfo.orderBase.status == 2">
      物流信息: 顺丰快递 [ 123456 ]
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="date" label="时间" width="180">
        </el-table-column>
        <el-table-column prop="name" label="状态" width="500">
        </el-table-column>
        <el-table-column prop="address" label="备注"> </el-table-column>
      </el-table>
    </div>
    <div class="logistics" v-if="this.homeInfo.orderBase.status == 3">
      物流信息: 顺丰快递 [ 123456 ]
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="date" label="时间" width="180">
        </el-table-column>
        <el-table-column prop="name" label="状态" width="500">
        </el-table-column>
        <el-table-column prop="address" label="备注"> </el-table-column>
      </el-table>
    </div>
    <div class="logistics" v-if="this.homeInfo.orderBase.status == 4">
      物流信息: 顺丰快递 [ 123456 ]
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="date" label="时间" width="180">
        </el-table-column>
        <el-table-column prop="name" label="状态" width="500">
        </el-table-column>
        <el-table-column prop="address" label="备注"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import orderFor from '@/api/orderFor.js'
export default {
  data() {
    return {
      homeInfo: '',
      options: [
        {
          value: '选项1',
          label: '顺丰快递',
        },
        {
          value: '选项2',
          label: '韵达快递',
        },
        {
          value: '选项3',
          label: '中国邮政',
        },
        {
          value: '选项4',
          label: '申通快递',
        },
        {
          value: '选项5',
          label: '中通快递',
        },
      ],
      sendDone: {
        orderId: '', //订单id
        deliverySn: '', //物流单号
        deliveryCompany: '', //物流公司名称
      },
      tableData: [
        {
          date: '2015-03-06 21:16:58',
          name: '深圳市横岗速递营销部已收件',
          address: '揽投员姓名：钟定基;联系电话：13883838888',
        },
        {
          date: '2015-03-07 14:25:00',
          name: '离开深圳市 发往广州市',
          address: '',
        },
        {
          date: '2015-03-08 00:17:00',
          name: '到达广东速递物流公司广航中心处理中心（经转）',
          address: '',
        },
        {
          date: '2015-03-08 01:15:00',
          name: '离开广州市 发往北京市（经转）',
          address: '',
        },
        {
          date: '2015-03-09 09:01:00',
          name: '到达北京黄村转运站处理中心（经转）',
          address: '',
        },
        {
          date: '2015-03-09 18:39:00',
          name: '离开北京市 发往呼和浩特市（经转）',
          address: '',
        },
        {
          date: '2015-03-10 18:06:00',
          name: '到达 呼和浩特市 处理中心',
          address: '',
        },
        {
          date: '2015-03-11 09:53:48',
          name: '呼和浩特市邮政速递物流分公司金川揽投部安排投递',
          address: '投递员姓名：安长虹;联系电话：18047140142',
        },
      ],
    }
  },
  created() {
    // this.homeInfo = this.$route.params.id
    // console.log(this.homeInfo, 'this.homeInfo')
    this.orderDetail()
  },
  mounted() {},
  methods: {
    orderDetail() {
      orderFor.orderDetailApi(this.$route.params.id).then(res => {
        this.homeInfo = res.data.orderDetail
        console.log(this.homeInfo, 'this.homeInfo')
      })
    },
    //确认发货
    shipments() {
      orderFor
        .sendDoneApi({
          orderId: this.$route.params.id,
          deliverySn: this.sendDone.deliverySn,
          deliveryCompany: this.sendDone.deliveryCompany,
        })
        .then(res => {
          console.log(res, '确认收货的res')
        })
      this.orderDetail()
    },
  },
}
</script>

<style lang="scss">
.addess {
  margin-left: 5%;
}
.message {
  width: 100%;
  margin-left: 5%;
  margin-top: 30px;
  margin-bottom: 30px;
  /* display: flex;  */
  span {
    font-size: 10px;
    margin-right: 264px;
  }
  span:nth-child(2) {
    margin-right: 160px !important;
  }
  span:nth-child(3) {
    margin-right: 210px !important;
  }
}
.messages {
  margin-left: 5%;
  /* display: flex;  */
  span {
    font-size: 10px;
    margin-right: 173px;
  }
}
.creade span {
  /* display: block; */
  float: left;
  width: 14.285%;
  height: 50px;
  border: 1px solid gray;
  display: flex;
  align-items: center;
  justify-content: center;
}
.creades span {
  /* display: block; */
  float: left;
  width: 14.285%;
  height: 120px;
  border: 1px solid gray;
  display: flex;
  align-items: center;
  justify-content: center;
}
.creadess {
  /* position: relative;
  left: 5%;
  top: 20px; */
  margin-left: 5%;
  margin-right: 5%;
}
.cost {
  position: absolute;
  left: 5%;
  margin-top: 20px;
}
.shipments {
  position: absolute;
  bottom: 20px;
  right: 45%;
}
.logistics {
  width: 90%;
  margin: 0 auto;
  margin-top: 100px;
}
</style>